<template>
  <!-- 主容器 -->
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 py-8 px-4 sm:px-8">
    <!-- 内容居中容器（限制最大宽度，统一所有内容的左右边距） -->
    <div class="max-w-6xl mx-auto">
      
      <!-- 1. 顶部个人基本信息区域 -->
      <div class="bg-gradient-to-r from-primary/80 to-secondary/80 dark:from-primary/60 dark:to-secondary/60 rounded-2xl shadow-md p-6 mb-6">
        <div class="flex flex-col sm:flex-row items-center">
          <!-- 头像区域 -->
          <div class="relative">
            <img
              :src="user.avatar || defaultAvatar"
              class="w-24 h-24 rounded-full border-4 border-white shadow-md object-cover bg-white"
              alt="用户头像"
            />
            <button class="absolute bottom-0 right-0 bg-white rounded-full p-1.5 shadow hover:scale-110 transition" @click="uploadAvatar">
              <i class="fa fa-camera text-primary"></i>
            </button>
          </div>
          
          <!-- 个人信息 -->
          <div class="mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left flex-1">
            <div class="flex items-center gap-2 justify-center sm:justify-start">
              <span class="text-2xl font-bold text-white">{{ user.username || '未登录' }}</span>
              <button v-if="isEditingName" @click="saveUsername" class="text-xs px-2 py-1 bg-white text-primary rounded hover:bg-primary/10">保存</button>
              <button v-else @click="isEditingName = true" class="text-xs px-2 py-1 bg-white text-primary rounded hover:bg-primary/10">修改</button>
            </div>
            
            <div class="flex flex-wrap items-center justify-center sm:justify-start gap-3 mt-2">
              <span class="px-2.5 py-0.5 rounded-full bg-white/30 text-white text-xs font-medium">
                {{ user.levelName }}
              </span>
              <span class="text-white/80 text-sm">
                已加入 {{ joinDays }} 天
              </span>
              <span class="text-white/80 text-sm">
                ID: {{ user.id }}
              </span>
            </div>
            
            <!-- 数据统计摘要 -->
            <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3 w-full sm:w-auto">
              <div class="bg-white/20 rounded-lg p-2 text-center">
                <div class="text-white font-bold">{{ stats.totalGames }}</div>
                <div class="text-white/80 text-xs">总场次</div>
              </div>
              <div class="bg-white/20 rounded-lg p-2 text-center">
                <div class="text-white font-bold">{{ stats.winRate }}%</div>
                <div class="text-white/80 text-xs">胜率</div>
              </div>
              <div class="bg-white/20 rounded-lg p-2 text-center">
                <div class="text-white font-bold">{{ stats.unlocked }}</div>
                <div class="text-white/80 text-xs">解锁汤面</div>
              </div>
              <div class="bg-white/20 rounded-lg p-2 text-center">
                <div class="text-white font-bold">{{ balance }}</div>
                <div class="text-white/80 text-xs">海龟币</div>
              </div>
            </div>
          </div>
          
        
        </div>
      </div>
      
      <!-- 2. 下方左右布局区域 -->
      <div class="flex flex-col lg:flex-row gap-6 mb-6">
        <!-- 左侧：设置选项导航 -->
        <div class="lg:w-64 bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
          <div 
            v-for="item in settingSections" 
            :key="item.id"
            class="p-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            :class="activeSection === item.id ? 'bg-primary/10 text-primary' : ''"
            @click="activeSection = item.id"
          >
            <div class="flex items-center gap-3">
              <i :class="item.icon" class="w-5 text-center"></i>
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        
        <!-- 右侧：具体内容展示区 -->
        <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
          <!-- 个人资料 -->
          <div v-if="activeSection === 'profile'">
            <h4 class="font-bold mb-4 text-lg">个人资料</h4>
            
            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">昵称</label>
                <input 
                  type="text" 
                  v-model="user.username" 
                  class="md:col-span-2 px-3 py-2 rounded border border-gray-200 dark:border-gray-600" 
                />
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">性别</label>
                <div class="md:col-span-2 flex gap-4">
                  <label class="flex items-center gap-2">
                    <input type="radio" v-model="user.gender" value="male" class="w-4 h-4" />
                    <span>男</span>
                  </label>
                  <label class="flex items-center gap-2">
                    <input type="radio" v-model="user.gender" value="female" class="w-4 h-4" />
                    <span>女</span>
                  </label>
                  <label class="flex items-center gap-2">
                    <input type="radio" v-model="user.gender" value="secret" class="w-4 h-4" />
                    <span>保密</span>
                  </label>
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">生日</label>
                <input 
                  type="date" 
                  v-model="user.birthday" 
                  class="md:col-span-2 px-3 py-2 rounded border border-gray-200 dark:border-gray-600" 
                />
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
                <label class="text-sm font-medium pt-2">个性签名</label>
                <textarea 
                  v-model="user.signature" 
                  rows="3"
                  class="md:col-span-2 px-3 py-2 rounded border border-gray-200 dark:border-gray-600" 
                  placeholder="说点什么..."
                ></textarea>
              </div>
              
              <div class="flex justify-end">
                <button 
                  class="px-6 py-2 bg-primary text-white rounded hover:shadow-lg transition" 
                  @click="saveProfile"
                >
                  保存修改
                </button>
              </div>
            </div>
          </div>
          
          <!-- 账号安全 -->
          <div v-if="activeSection === 'security'">
            <h4 class="font-bold mb-4 text-lg">账号安全</h4>
            
            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">账号安全等级</label>
                <div class="md:col-span-2 flex items-center gap-2">
                  <div class="h-2 flex-1 rounded bg-gradient-to-r from-green-500 to-primary"></div>
                  <span class="text-sm text-primary">高</span>
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">注册时间</label>
                <div class="md:col-span-2 text-gray-600">
                  {{ new Date(user.joinedAt).toLocaleDateString() }}
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">最后登录</label>
                <div class="md:col-span-2 text-gray-600">
                  {{ new Date().toLocaleString() }}
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">绑定手机</label>
                <div class="md:col-span-2 flex items-center justify-between">
                  <span>{{ user.phone ? user.phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') : '未绑定' }}</span>
                  <button class="px-3 py-1 text-sm bg-primary text-white rounded hover:shadow transition">
                    {{ user.phone ? '更换' : '绑定' }}
                  </button>
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">绑定邮箱</label>
                <div class="md:col-span-2 flex items-center justify-between">
                  <span>{{ user.email ? user.email.replace(/(.{3})(.*)(@.*)/, '$1****$3') : '未绑定' }}</span>
                  <button class="px-3 py-1 text-sm bg-primary text-white rounded hover:shadow transition">
                    {{ user.email ? '更换' : '绑定' }}
                  </button>
                </div>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-sm font-medium">修改密码</label>
                <div class="md:col-span-2 flex justify-end">
                  <button class="px-3 py-1 text-sm bg-primary text-white rounded hover:shadow transition" @click="showChangePassword = true">
                    修改
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 隐私设置 -->
          <div v-if="activeSection === 'privacy'">
            <h4 class="font-bold mb-4 text-lg">隐私设置</h4>
            
            <div class="space-y-4">
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">允许他人查看我的游戏记录</div>
                  <div class="text-sm text-gray-500">控制其他用户是否能看到你的游戏历史</div>
                </div>
                <input type="checkbox" v-model="privacy.showGameHistory" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">允许接收好友申请</div>
                  <div class="text-sm text-gray-500">是否对其他用户开放好友申请功能</div>
                </div>
                <input type="checkbox" v-model="privacy.allowFriendRequests" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">允许推荐给好友</div>
                  <div class="text-sm text-gray-500">是否允许系统将你推荐给可能认识的人</div>
                </div>
                <input type="checkbox" v-model="privacy.allowRecommend" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">个性化推荐</div>
                  <div class="text-sm text-gray-500">根据你的游戏习惯推荐汤面</div>
                </div>
                <input type="checkbox" v-model="privacy.personalizedRecommend" class="w-5 h-5" />
              </div>
            </div>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeSection === 'notifications'">
            <h4 class="font-bold mb-4 text-lg">通知设置</h4>
            
            <div class="space-y-4">
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">新消息通知</div>
                  <div class="text-sm text-gray-500">收到新消息时通知我</div>
                </div>
                <input type="checkbox" v-model="notifications.newMessage" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">活动通知</div>
                  <div class="text-sm text-gray-500">游戏活动和更新通知</div>
                </div>
                <input type="checkbox" v-model="notifications.events" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">好友动态</div>
                  <div class="text-sm text-gray-500">好友的游戏动态通知</div>
                </div>
                <input type="checkbox" v-model="notifications.friends" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between p-3 border border-gray-200 dark:border-gray-700 rounded-lg">
                <div>
                  <div class="font-medium">声音提示</div>
                  <div class="text-sm text-gray-500">通知时播放提示音</div>
                </div>
                <input type="checkbox" v-model="notifications.sound" class="w-5 h-5" />
              </div>
            </div>
          </div>
                    <!-- 意见反馈 -->
         <div v-if="activeSection === 'feedback'">
           <h4 class="font-bold mb-4 text-lg">意见反馈</h4>
           <textarea v-model="feedbackContent" rows="6" class="w-full rounded border border-gray-200 dark:border-gray-600 mb-4 px-3 py-2" placeholder="请输入您的意见或建议..."></textarea>
           <div class="flex justify-end">
            <button class="px-6 py-2 bg-primary text-white rounded hover:shadow transition" @click="submitFeedback">
              提交反馈
              </button>
           </div>
         </div>
          <!-- 充值中心 -->
          <div v-if="activeSection === 'recharge'">
            <h4 class="font-bold mb-4 text-lg">充值中心</h4>
            
            <!-- 虚拟货币余额 -->
            <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-6">
              <div class="flex flex-col sm:flex-row sm:items-center justify-between">
                <div>
                  <h5 class="font-medium mb-1">我的海龟币</h5>
                  <div class="text-2xl font-bold text-primary">{{ balance }} <span class="text-sm text-gray-500">个</span></div>
                </div>
                <div class="mt-3 sm:mt-0 text-sm">
                  <div class="text-gray-500 mb-1">可用于购买:</div>
                  <div>• 提示机会</div>
                  <div>• 高级汤面</div>
                  <div>• 特殊道具</div>
                </div>
              </div>
            </div>

            <!-- 充值套餐 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <div v-for="(pack, idx) in rechargePacks" 
                :key="idx"
                class="border rounded-lg p-5 hover:shadow-lg transition-all cursor-pointer"
                :class="{'border-primary bg-primary/5': selectedPack === idx, 'border-gray-200 dark:border-gray-700': selectedPack !== idx}"
                @click="selectedPack = idx"
              >
                <div class="flex justify-between items-start mb-3">
                  <div class="text-xl font-bold text-primary">{{ pack.coins }}</div>
                  <div class="px-2 py-0.5 rounded bg-primary/10 text-primary text-xs" v-if="pack.tag">
                    {{ pack.tag }}
                  </div>
                </div>
                <div class="text-sm text-gray-500 mb-3">海龟币</div>
                <div class="text-lg font-bold">¥{{ pack.price }}</div>
                <div class="text-xs text-gray-400 mt-1" v-if="pack.original">
                  原价: <span class="line-through">¥{{ pack.original }}</span>
                </div>
              </div>
            </div>

            <!-- 支付按钮 -->
            <div class="mt-6 text-center">
              <button 
                class="px-8 py-3 bg-primary text-white rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50"
                :disabled="selectedPack === null"
                @click="handleRecharge"
              >
                立即充值
              </button>
            </div>
          </div>
          
          <!-- 系统设置 -->
          <div v-if="activeSection === 'system'">
            <h4 class="font-bold mb-4 text-lg">系统设置</h4>
            
            <div class="space-y-6">
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium">深色模式</div>
                  <div class="text-sm text-gray-500">切换深色/浅色显示模式</div>
                </div>
                <input type="checkbox" v-model="darkMode" @change="toggleDarkMode" class="w-5 h-5" />
              </div>
              
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium">清除缓存</div>
                  <div class="text-sm text-gray-500">清除本地缓存数据</div>
                </div>
                <button class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-sm rounded" @click="clearCache">
                  清除 ({{ cacheSize }})
                </button>
              </div>
              
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium">版本信息</div>
                  <div class="text-sm text-gray-500">当前应用版本号</div>
                </div>
                <span class="text-gray-600">v{{ appVersion }}</span>
              </div>
              
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium">检查更新</div>
                  <div class="text-sm text-gray-500">检查是否有新版本</div>
                </div>
                <button class="px-3 py-1 bg-primary text-white text-sm rounded hover:shadow transition" @click="checkUpdate">
                  检查
                </button>
              </div>
              
              <div class="flex items-center justify-between">
                <div>
                  <div class="font-medium text-red-500">注销账号</div>
                  <div class="text-sm text-gray-500">此操作不可恢复，请谨慎</div>
                </div>
                <button class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:shadow transition" @click="confirmLogout">
                  注销
                </button>
              </div>
            </div>
          </div>
          
          <!-- 帮助中心 -->
          <div v-if="activeSection === 'help'">
            <h4 class="font-bold mb-4 text-lg">帮助中心</h4>
            
            <div class="space-y-4">
              <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 font-medium">如何开始游戏？</div>
                <div class="p-3">
                  点击首页的"开始游戏"按钮，选择一个汤面即可开始。根据汤面描述，通过提问来推理出完整的故事真相。
                </div>
              </div>
              
              <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 font-medium">海龟币有什么用？</div>
                <div class="p-3">
                  海龟币是游戏内的虚拟货币，可以用于购买提示、解锁高级汤面和特殊道具，帮助你更好地进行游戏。
                </div>
              </div>
              
              <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 font-medium">如何获得成就？</div>
                <div class="p-3">
                  完成特定的游戏目标可以获得成就，如连续猜对一定数量的汤面、解锁特定难度的汤面等。成就可以展示在你的个人资料中。
                </div>
              </div>
              
              <div class="mt-6">
                <button class="w-full py-2 border border-primary text-primary rounded hover:bg-primary/5 transition" @click="showFeedback = true">
                  还有其他问题？联系客服
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 3. 游戏数据统计区（放在最底部，保持与其他元素宽度一致） -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
        <h3 class="font-bold mb-6 text-lg text-primary">游戏数据统计</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col items-center">
            <h4 class="font-medium mb-3">近7天游戏次数</h4>
            <canvas id="gamesLineChart" height="200" class="w-full"></canvas>
          </div>
          <div class="flex flex-col items-center">
            <h4 class="font-medium mb-3">难度分布</h4>
            <canvas id="difficultyPieChart" height="200" class="w-full max-w-xs"></canvas>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div v-if="showChangePassword" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md shadow-lg">
        <h3 class="font-bold mb-3 text-primary">修改密码</h3>
        <div class="space-y-3">
          <input type="password" v-model="password.old" placeholder="请输入旧密码" class="w-full px-3 py-2 rounded border border-gray-200 dark:border-gray-600" />
          <input type="password" v-model="password.new" placeholder="请输入新密码" class="w-full px-3 py-2 rounded border border-gray-200 dark:border-gray-600" />
          <input type="password" v-model="password.confirm" placeholder="请确认新密码" class="w-full px-3 py-2 rounded border border-gray-200 dark:border-gray-600" />
        </div>
        <div class="flex justify-end gap-3 mt-4">
          <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded hover:shadow transition" @click="showChangePassword = false">取消</button>
          <button class="px-4 py-2 bg-primary text-white rounded hover:shadow transition" @click="changePassword">确认修改</button>
        </div>
      </div>
    </div>

    <!-- Toast 提示 -->
    <div v-if="toast.show" class="fixed top-6 left-1/2 -translate-x-1/2 z-50 px-6 py-3 rounded-lg shadow-lg text-white"
      :class="toast.success ? 'bg-green-500' : 'bg-red-500'"
      @click="toast.show = false">
      {{ toast.message }}
    </div>
    
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const user = reactive({
  id: 'T20240601008',
  avatar: '', // 头像url
  username: '海龟玩家',
  levelName: '普通用户',
  joinedAt: '2024-06-01',
  phone: '13800138000',
  email: 'user@example.com',
  gender: 'secret',
  birthday: '',
  signature: ''
})
const defaultAvatar = '/turtle-default.png'
const isEditingName = ref(false)
const joinDays = computed(() => {
  const join = new Date(user.joinedAt)
  const now = new Date()
  return Math.floor((now - join) / (1000 * 60 * 60 * 24))
})

// 游戏数据
const stats = reactive({
  totalGames: 42,
  winRate: 67,
  unlocked: 18,
  streak: 5
})



// 充值相关数据
const balance = ref(100) // 当前余额
const selectedPack = ref(null) // 选中的充值套餐
const rechargePacks = [
  { coins: 100, price: 10, tag: '新手推荐' },
  { coins: 300, price: 28, original: 30, tag: '超值' },
  { coins: 500, price: 45, original: 50, tag: '最受欢迎' },
  { coins: 1000, price: 88, original: 100 },
  { coins: 2000, price: 168, original: 200 },
  { coins: 5000, price: 388, original: 500, tag: '最划算' }
]

// 设置区域相关
const activeSection = ref('profile') // 默认显示个人资料
const settingSections = [
  { id: 'profile', name: '个人资料', icon: 'fa fa-user' },
  { id: 'security', name: '账号安全', icon: 'fa fa-shield' },
  { id: 'privacy', name: '隐私设置', icon: 'fa fa-lock' },
  { id: 'notifications', name: '通知设置', icon: 'fa fa-bell' },
  { id: 'feedback', name: '意见反馈', icon: 'fa fa-comment' },
  { id: 'recharge', name: '充值中心', icon: 'fa fa-credit-card' },
  { id: 'system', name: '系统设置', icon: 'fa fa-cog' },
  { id: 'help', name: '帮助中心', icon: 'fa fa-question-circle' }
]

// 隐私设置
const privacy = reactive({
  showGameHistory: true,
  allowFriendRequests: true,
  allowRecommend: false,
  personalizedRecommend: true
})

// 通知设置
const notifications = reactive({
  newMessage: true,
  events: true,
  friends: false,
  sound: true
})

// 系统设置
const darkMode = ref(false)
const cacheSize = ref('1.2MB')
const appVersion = '1.2.0'

// 表单数据
const password = reactive({ old: '', new: '', confirm: '' })
const showChangePassword = ref(false)

// 反馈相关
const showFeedback = ref(false)
const feedbackContent = ref('')

// 提示框
const toast = reactive({ show: false, message: '', success: true })

// 方法定义
function uploadAvatar() {
  showToast('暂未开放头像上传功能', false)
}

function saveUsername() {
  isEditingName.value = false
  showToast('用户名已修改', true)
}

function saveProfile() {
  showToast('个人资料已更新', true)
}

function changePassword() {
  if (!password.old) {
    return showToast('请输入旧密码', false)
  }
  if (password.new.length < 6) {
    return showToast('新密码长度不能少于6位', false)
  }
  if (password.new !== password.confirm) {
    return showToast('两次输入的密码不一致', false)
  }
  
  showChangePassword.value = false
  showToast('密码修改成功', true)
  
  // 清空表单
  password.old = ''
  password.new = ''
  password.confirm = ''
}

function toggleDarkMode() {
  darkMode.value = !darkMode.value
  document.documentElement.classList.toggle('dark', darkMode.value)
  showToast(`已${darkMode.value ? '开启' : '关闭'}深色模式`, true)
}

function clearCache() {
  cacheSize.value = '0MB'
  showToast('缓存已清理', true)
}

function checkUpdate() {
  showToast('当前已是最新版本', true)
}

function confirmLogout() {
  if (confirm('确定要注销账号吗？此操作不可恢复！')) {
    localStorage.removeItem('token')
    router.push('/login')
  }
}

function submitFeedback() {
  if (!feedbackContent.value.trim()) {
    return showToast('请输入反馈内容', false)
  }
  
  showFeedback.value = false
  showToast('反馈已提交，感谢您的建议！', true)
  feedbackContent.value = ''
}

function handleRecharge() {
  if (selectedPack.value === null) return
  // 调用支付接口
  showToast(`正在为您充值 ${rechargePacks[selectedPack.value].coins} 海龟币...`, true)
}

function showToast(msg, success = true) {
  toast.message = msg
  toast.success = success
  toast.show = true
  setTimeout(() => { toast.show = false }, 3000)
}

// Chart.js 初始化
onMounted(() => {
  // 如需使用Chart.js，先执行：npm install chart.js
  // 然后取消以下注释并完善配置
  /*
  import Chart from 'chart.js/auto'
  
  // 初始化折线图
  new Chart(document.getElementById('gamesLineChart'), {
    type: 'line',
    data: {
      labels: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
      datasets: [{
        label: '游戏次数',
        data: [3, 5, 2, 6, 4, 7, 5],
        borderColor: '#3b82f6',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        tension: 0.4,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } }
    }
  })

  // 初始化饼图
  new Chart(document.getElementById('difficultyPieChart'), {
    type: 'pie',
    data: {
      labels: ['简单', '中等', '困难'],
      datasets: [{
        data: [12, 8, 4],
        backgroundColor: ['#22c55e', '#eab308', '#ef4444'],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { position: 'bottom' } }
    }
  })
  */
})
</script>

<style scoped>
/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}
</style>
